<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HW2</title>
    <style>
        body {
            background-color:white;
        }
        img {
            height:50px;
            
        }
        div {
            height:200px;
            width:200px;
            margin:auto;
            background-color: black;
            position:relative;
            margin:5px auto;
        }
        .p1 {
         position: absolute;
         top:75px;
         left:75px;
        }
        .p2 {
        position: absolute;
        top:75px;
        left:40px;
        }
        .p3 {
        position: absolute;
        top:75px;
        right: 40px;
        }
        .p4 {
        position: absolute;
        top: 75px;
        left: 10px;
        }
        .p5 {
        position: absolute;
         top:75px;
         left:75px;
        }
        .p6 {
        position: absolute;
        top:75px;
        right: 10px;
        }
        .p7 {
            position: absolute;
            top:25px;
            left:25px;
        }
        .p8 {
            position: absolute;
            top:25px;
            right:25px;
        }
        .p9 {
            position: absolute;
            bottom:25px;
            left:25px;
        }
        .p10 {
            position: absolute;
            bottom:25px;
            right:25px;
        }
        .p11 {
            position: absolute;
        top:25px;
        right: 25px;
        }
        .p12 {
            position: absolute;
            top:25px;
            left:25px;
        }
        .p13 {
            position: absolute;
            bottom:25px;
            right:25px;
        }
        .p14 {
            position: absolute;
            bottom:25px;
            left:25px;
        }
        .p15 {
        position: absolute;
         top:75px;
         left:75px;
        }
        .p16 {
        position: absolute;
        top:10px;
        left:30px;
        }
        .p17 {
            position: absolute;
            top:75px;
            left:30px;
        }
        .p18 {
            position: absolute;
            bottom:10px;
            left:30px;
        }
        .p19 {
            position: absolute;
            top:10px;
            right:30px;
        }
        .p20 {
            position: absolute;
            top:75px;
            right:30px;
        }
        .p21 {
            position: absolute;
            bottom:10px;
            right:30px;
        }
        .q1 {
        position: absolute;
        bottom:10px;
        left:10px;
        }
        .q2 {
            position: absolute;
            bottom:10px;
            right:75px;
        }
        .q3 {
            position: absolute;
            bottom:10px;
            right:10px;
        }
        .q4 {
            position: absolute;
            top:75px;
            left:10px;
        }
        .q5 {
            position: absolute;
            top:75px;
            right:75px;
        }
        .q6 {
            position: absolute;
            top:75px;
            right:10px;
        }
        .q7 {
            position: absolute;
            top:10px;
            left:75px;
        }
        .m1 {
        position: absolute;
        top:0px;
        left:30px;
        }
        .m2 {
            position: absolute;
            top:50px;
            left:30px;
        }
        .m3 {
            position: absolute;
            top:100px;
            left:30px;
        }
        .m4 {
            position: absolute;
            top:150px;
            left:30px;
        }
        .m5 {
            position: absolute;
            top:0px;
            right:30px;
        }
        .m6 {
            position: absolute;
            top:50px;
            right:30px;
        }
        .m7 {
            position: absolute;
            top:100px;
            right:30px;
        }
        .m8 {
            position: absolute;
            top:150px;
            right:30px;
        }
        .n1 {
        position: absolute;
        top:10px;
        left:10px;
        }
        .n2 {
            position: absolute;
            top:10px;
            left:75px;
        }
        .n3 {
            position: absolute;
            top:10px;
            right:10px;
        }
        .n4 {
            position: absolute;
            top:75px;
            left:10px;
        }
        .n5 {
            position: absolute;
            top:75px;
            right:75px;
        }
        .n6 {
            position: absolute;
            top:75px;
            right:10px;
        }
        .n7 {
            position: absolute;
            bottom:10px;
            right:10px;
        }
        .n8 {
            position: absolute;
           bottom:10px;
            right:75px;
        }
        .n9 {
            position: absolute;
            bottom:10px;
            left:10px;
        }
        }
    </style>
</head>
<body>
<div >
    <img class="p1" src="HW-2.jpeg" >
</div>
<div >
    <img class="p2" src="HW-2.jpeg" >
    <img class="p3" src="HW-2.jpeg" >
</div>
<div > 
    <img class="p4" src="HW-2.jpeg" >
    <img class="p5" src="HW-2.jpeg" >
    <img class="p6" src="HW-2.jpeg" >
 </div>
<div>
    <img class="p7" src="HW-2.jpeg" >
    <img class="p8" src="HW-2.jpeg" >
    <img class="p9" src="HW-2.jpeg" >
    <img class="p10" src="HW-2.jpeg" >
</div>
<div>
<img  class="p11" src="HW-2.jpeg" >
<img  class="p12" src="HW-2.jpeg" >
<img  class="p13" src="HW-2.jpeg" >
<img  class="p14" src="HW-2.jpeg" >
<img  class="p15" src="HW-2.jpeg" >
</div>
<div>
    <img class="p16" src="HW-2.jpeg" >
    <img class="p17" src="HW-2.jpeg" >
    <img class="p18" src="HW-2.jpeg" >
    <img class="p19" src="HW-2.jpeg" >
    <img class="p20" src="HW-2.jpeg" >
    <img class="p21" src="HW-2.jpeg" >
</div>
<div>
    <img class="q1" src="HW-2.jpeg" >
    <img class="q2" src="HW-2.jpeg" >
    <img class="q3" src="HW-2.jpeg" >
    <img class="q4" src="HW-2.jpeg" >
    <img class="q5" src="HW-2.jpeg" >
    <img class="q6" src="HW-2.jpeg" >
    <img class="q7" src="HW-2.jpeg" >
</div>
<div>
    <img class="m1" src="HW-2.jpeg" >
    <img class="m2" src="HW-2.jpeg" >
    <img class="m3" src="HW-2.jpeg" >
    <img class="m4" src="HW-2.jpeg" >
    <img class="m5" src="HW-2.jpeg" >
    <img class="m6" src="HW-2.jpeg" >
    <img class="m7" src="HW-2.jpeg" >
    <img class="m8" src="HW-2.jpeg" >
</div>
<div>
    <img class="n1" src="HW-2.jpeg" >
    <img class="n2" src="HW-2.jpeg" >
    <img class="n3" src="HW-2.jpeg" >
    <img class="n4" src="HW-2.jpeg" >
    <img class="n5" src="HW-2.jpeg" >
    <img class="n6" src="HW-2.jpeg" >
    <img class="n7" src="HW-2.jpeg" >
    <img class="n8" src="HW-2.jpeg" >
    <img class="n9" src="HW-2.jpeg" >
</div>
</body>
</html>